<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper inputTop">
          <el-row :gutter="32" class="rowPda">
            <el-col :xs="24" :sm="8" :lg="6" class="flex">
              <el-input v-model="listQuery.content" placeholder="请输入搜索内容" class="btnScr" :xs="24" :sm="12" :lg="16" />
              <!-- <el-button type="primary" icon="el-icon-search" v-if="activeName != 'first'" class="btnScrright" :xs="24" :sm="12" :lg="8" @click="scr">搜索</el-button> -->
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <slot name="statusBtn" />
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-select v-if=" activeName == 'first'" clearable v-model="listQuery.status" placeholder="请选择状态" class="btnScr" @change="scr">
                <el-option
                  v-for="item in genderOptionsArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select v-if=" activeName != 'first'" clearable v-model="listQuery.status" placeholder="请选择状态" class="btnScr" @change="scr">
                <el-option
                  v-for="item in genderOptionsArrsecond"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>              
            </el-col>
              <el-col :xs="24" :sm="8" :lg="3" class="agg">
                  <slot name="xxBtn" />
              </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <slot name="sxBtn" />
            </el-col>
            <el-col :xs="24" :sm="8" :lg="12" class="agg" style="text-align:right">
              <slot name="xzAdd" />
            </el-col>            
            <el-col :xs="24" :sm="8" :lg="15" class="agg" style="text-align:right">
              <slot />
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!---->
    <el-dialog title="" width="647px" custom-class="myDigo inputTop" :show-close="false" :visible.sync="show">
      <h2>添加业主 <i class="el-icon-close" @click="close" /></h2>
      <!---->
      <div class="digoDiv">
        <el-form ref="editForm" :model="editForm" :rules="editFormRule" label-width="85px" class="formDiv">
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="姓名:" :required="true">
                <el-input v-model="editForm.name" placeholder="请输入姓名" />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="来源:">
                <el-select v-model="editForm.source" placeholder="请选择来源">
                  <el-option
                    v-for="item in ownerSource"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="状态:">
                <el-select v-model="editForm.gender" placeholder="请选择状态">
                  <el-option
                    v-for="item in genderOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="生日:">
                <el-date-picker
                  v-model="editForm.birthday"
                  type="date"
                  style="width: 200px;"
                  placeholder="请选择生日"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="电话:" :required="true">
                <el-input v-model="editForm.mobile" placeholder="请输入电话" />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="邮箱:">
                <el-input v-model="editForm.email" placeholder="请输入邮箱" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="24" :sm="23" :lg="23" class="">
              <el-form-item label="地址:" label-width="85px">
                <el-select v-model="editForm.province" style="width: 120px;margin-right: 8px" placeholder="请选择省">
                  <el-option label="省1" value="省1" />
                  <el-option label="省2" value="省2" />
                </el-select>
                <el-select v-model="editForm.city" style="width: 120px;margin-right: 8px" placeholder="请选择市">
                  <el-option label="市1" value="市1" />
                  <el-option label="市2" value="市2" />
                </el-select>
                <el-input v-model="editForm.address" style="width: 202px" placeholder="请输入详细地址" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="24" :sm="23" :lg="23" class="">
              <el-form-item label="备注:" label-width="85px">
                <el-input
                  v-model="editForm.note"
                  type="textarea"
                  placeholder="请输入内容"
                  maxlength="30"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!---->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('editForm')">保存</el-button>
        <el-button class="grey-btn" @click="show = false">取 消</el-button>
      </div>
    </el-dialog>
    <!---->
  </div>
</template>
<script>
import { page, getTblae, listByRole, tjByfp, tjBygj } from '@/api/serviceItem'
import { genderFormat } from '@/utils/common'
import { genderOptions, ownerSource } from '@/utils/consts'
import { list } from '@/api/tag'
import { add, update } from '@/api/manager'

export default {
  props: {
    activeName: ''
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      show: false,
      listQuery: {
        page: 1,
        limit: 20,
        name: null,
        gender: null,
        mobile: null,
        source: null,
        tag: null
      },
      genderOptionsArr: [ { label: '未分配', value: 0 }, { label: '未完成', value: 1 }, { label: '已完成', value: 2 }],
      genderOptionsArrsecond: [{ label: '未发布', value: 0 }, { label: '已发布', value: 1 }],
      editForm: {
        id: undefined,
        name: '',
        source: '',
        gender: '',
        birthday: null,
        avatar: '',
        mobile: '',
        email: '',
        province: '',
        city: '',
        address: '',
        note: ''
      },
      genderOptions,
      genderFormat,
      ownerSource,
      tags: [],
      editFormRule: {
        name: [{ required: true, message: '姓名必填', trigger: 'change' }],
        mobile: [{ required: true, message: '电话必填', trigger: 'change' }]
      }
    }
  },
  created() {
    console.log(this.flag)
    this.getRemoteTags()
  },
  methods: {
    initTwo() {
      this.loading = true
      this.$emit('resoDataTwo', this.listQuery, this.listQuery)
      //  page(this.listQuery).then(response => {
      // this.list = response.data.records
      // this.total = response.data.total
      // this.loading = false

      //  })
    },
    scr() {
      if (sessionStorage.getItem('activeName') == 'second') {
        this.initTwo()
        return
      }
      this.$emit('resoData', this.listQuery, this.listQuery)
      // getTblae(this.listQuery).then(response => {

      //   // this.list = response.data.records
      //   // this.total = response.data.total
      //   // this.loading = false
      // })
    },
    getRemoteTags() {
      list().then(response => {
        if (response.data.length !== 0) {
          this.tags = response.data
        }
      })
    },
    showEditForm(row = null) {
      this.show = true
      if (row !== null) {
        this.editForm = Object.assign(row)
      }
    },
    close() {
      this.show = false
    },
    listData() {
      return this.listQuery
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          if (this[formName].id === undefined) {
            add(this[formName]).then((response) => {
              console.log(response)
              if (response.code === 200) {
                this.$notify.success({ message: '保存成功' })
                this.show = false
              }
              this.loading = false
            })
          } else {
            update(this[formName]).then((response) => {
              console.log(response)
              if (response.code === 200) {
                this.$notify.success({ message: '保存成功', offset: 50 })
                this.show = false
              }
              this.loading = false
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handlePictureCardPreview() {

    },
    handleDownload() {

    },
    handleRemove() {

    }
  }
}
</script>

<style lang="scss" scoped>
.add{background: #5AC6B7;color: #fff;border: 0;border-radius: 2px;}
.flex{display: flex;justify-content: space-between;align-items: center;padding-right: 8px!important;}
.btnScr{width: 100%;margin-bottom: 15px;}
::v-deep .btnScr input{border-radius:2px;}
.btnScrright{border-radius:2px;margin-top: -15px;}
.agg{padding-left:8px!important;padding-right: 8px!important;}
@media (max-width:1200px) {
.flex{display: flex;justify-content: space-between;align-items: center;padding-left:8px!important; padding-right: 8px!important;}
}
.myDigo h2{background: #343436;}
::v-deep .myDigo .el-dialog__footer{background: #E5E9ED;padding-top: 15px;}
::v-deep .el-dialog.myDigo .el-dialog__body{padding: 0;}
::v-deep .el-dialog.myDigo .el-dialog__header{display: none;}
.el-dialog.myDigo h2{height: 58px;display: flex;justify-content: space-between;align-items: center;padding-left: 39px;padding-right: 39px;color: #fff;font-size: 18px; padding-top: 0;
    margin-top: 0;overflow: hidden;font-weight: normal;font-family: 'SourceHanSansSC-regular';}
.el-dialog.myDigo h2 i{font-size: 26px;cursor: pointer;}
::v-deep  .el-dialog.myDigo  .el-dialog__body{text-align: left;}
.mtright{margin-right: 5px;}
::v-deep  .el-upload-list--picture-card .el-upload-list__item{width: 70px;height: 56px;}
::v-deep  .el-upload-list--picture-card .el-upload-list__item div.filediv{width: 100%;height: 100%;}
::v-deep  .el-upload--picture-card{width: 70px;height: 56px;line-height: 66px;}
::v-deep .el-upload__text{line-height: initial;color: #cacaca;margin-top: -10px;font-size: 12px;}
.right10{margin-left: 10px;}
.right20{margin-left: 20px;}
::v-deep .itxt label{font-weight: normal;font-size: 12px;}
::v-deep .itxt {margin-bottom: 15px;}
::v-deep .itxtactive label{color: #5AC6B7;}
.borbtoonline{border-bottom: 1px solid #f2f2f2;padding-bottom: -15px;}
.bortopline{margin-top: 15px;}
.borbtoonline .el-form-item{margin-bottom: 10px;}
.formDiv{padding-left: 39px;padding-right: 39px;}
.rowPda{padding-right: 10px;}
</style>

<style>
@media (min-width:1200px) {
        .inputTop input::-webkit-input-placeholder, textarea::-webkit-input-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }

        .inputTop input:-moz-placeholder, textarea:-moz-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }

        .inputTop input::-moz-placeholder, textarea::-moz-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }

        .inputTop input:-ms-input-placeholder, textarea:-ms-input-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }
}
</style>
